/**
  * navbar Theme: clear
  * Theme ID: clear
  * Author: hzp (hzp@yunshipei.com)
  */
@am-navbar-boxshare-bd-color: @global-border-darker;
@am-navbar-boxshare-text-color: @global-text-color;
@am-navbar-boxshare-off-color: @global-primary;
@am-navbar-boxshare-bg-color: @white;
@am-navbar-mask-bg-color: @global-mask-bg-color;

@navbar-moreList-bg: @white;
@navbar-moreList-bd-color: @global-border-darker;
@navbar-moreList-li-icon-color: @global-icon-color;
@navbar-moreList-a-icon-color: @global-primary;
@navbar-moreList-a-color: @gray-darker;


.am-navbar-moreList {
  list-style: none;
  padding-left: 0;
  margin: 0;
  background: @navbar-moreList-bg;
  position: fixed;
  bottom: 50px;
  left: 0;
  width: 100%;
  z-index: @z-index-navbar - 1;
  display: none;
  border-left: 2px solid @navbar-moreList-bd-color;
  border-right: 2px solid @navbar-moreList-bd-color;
  border-top: 1px solid @navbar-moreList-bd-color;

  li {
    line-height: 40px;
    border-top: 1px solid @navbar-moreList-bd-color;
    position: relative;
    border-bottom: 0;

    &::after {
      font-family: "FontAwesome";
      content: "\f054";
      color: @navbar-moreList-li-icon-color;
      display: inline-block;
      position: absolute;
      top: 0;
      right: 20px;
    }

    a {
      display: inline-block;
      width: 100%;
      height: 38px;
      color: @navbar-moreList-a-color;
      padding-left: 30px;
      span {
        &::before {
          color: @navbar-moreList-a-icon-color;
          margin-right: 10px;
        }
      }
      img {
        vertical-align: middle;
        height: 20px;
        width: 20px;
        display: inline;
      }
    }

  }
}

.am-navbar-clear {
  @navbar-bg-top-color: @global-bg-color;
  @navbar-bg-bottom-color: @global-bg-dark-color;
  @navbar-bd-color: @global-border;
  @navbar-a-color: @global-text-light-color;
  @navbar-a-active-color: @global-primary;

  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  #gradient > .vertical(@navbar-bg-top-color, @navbar-bg-bottom-color);
  z-index: @z-index-navbar;
  border-top: 1px solid @navbar-bd-color;

  & > ul {
    list-style: none;
    padding-left: 0;
  }

  .am-navbar-item {
    text-align: center;
    a {
      color: @navbar-a-color;
      text-shadow: 0 0 0;
      display: inline-block;
      width: 100%;
      height: @navbar-height;
      font-size: 12px;
      text-align: center;
      img {
        vertical-align: middle;
        height: 24px;
        width: 24px;
        display: inline;
      }
      span {
        display: inline-block;
        width: 24px;
        height: 24px;
        vertical-align: top;
        margin: 4px auto 0;
        &:before {
          font-size: 22px;
          color: @navbar-a-color;
          .transition(all .2s linear);
        }
      }
    }
    a:active {
      color: @navbar-a-active-color;
      span {
        &:before {
          color: @navbar-a-active-color;
        }
      }
    }
  }

  .am-navbar-more-active {
    & > a {
      color: @navbar-a-active-color;
      span {
        &::before {
          .rotate(180deg);
          .transition(all .2s linear);
          color: @navbar-a-active-color;
        }
      }
    }
  }

  .hook-am-navbar-clear;
}

.am-navbar-top {
  & > ul {

    .am-navbar-item {

      a {
        line-height: 20px;

        img {
          display: block;
          margin: 4px auto 0
        }

        span {
          display: block;
          line-height: 24px;
          margin: 4px auto 0
        }
      }
    }
  }
}

.hook-am-navbar-clear() {
}
